<template>
  <div>
    <el-input
        style="width: 100%"
        v-model="filterText"
        :placeholder="placeholder"
        autocomplete="off"
        auto-complete="new-password"
        readonly
        @click.native="changeSelectTree()"
        @blur="hideParentClick"/>

    <el-tree
        class="width-220 selectTree-input objectTree"
        ref="tree"
        :data="data"
        :expand-on-click-node="true"
        :disable-branch-nodes="true"
        :filter-node-method="filterNode"
        :props="defaultProps"
        :current-node-key="currentId"
        node-key="pzlxglId"
        default-expand-all
        v-show="isShowSelect"
        @node-click="handleNodeClick"/>
  </div>
</template>
<script>
// import {selectList} from "@/api/configuration";
import {buildTree} from "@/utils/toolkit";

export default {
  name: 'BcTree',
  props: {
    echo: {
      placeholder: {
        type: String,
        default: ''
      },
    },
    params: {
      type: Object,
      default() {
        return {}
      }
    },
    showCheckbox: {
      type: Boolean,
      default: false
    },
    placeholder: {
      type: String,
      default: '输入关键字进行过滤'
    },
    currentId: {
      type: String,
      default: null
    },
  },

  watch: {
    filterText(val) {
      if (this.isShowSelect)
        this.$refs.tree.filter(val);
    },
    echo(val){
      this.echo ? this.filterText = this.echo : ''
    }
  },

  created() {
    this.getTree()
  },

  methods: {
    //节点点击事件
    handleNodeClick(data) {
      this.filterText = data.pzlxglLxmc
      this.$emit('handleNodeClick', data)
      this.isShowSelect = false
    },

    //关键字过滤事件
    filterNode(value, data) {
      if (!value) return true;
      return data.pzlxglLxmc.indexOf(value) !== -1;
    },

    //获取树图数据
    getTree() {
      // selectList(this.params).then(res => {
      //   if (res.data.items) {
      //     let treeData=res.data.items.filter(item=>item.pzlxglPid!=-1)
      //     this.data = buildTree(treeData, {
      //       parentId: 'pzlxglPid',
      //       id: 'pzlxglId'
      //     });
      //   }
      // }).catch(err => {
      // });

    },

    //点击input 显示tree
    changeSelectTree() {
      this.isShowSelect = true;
    },

    //点击其他区域隐藏tree
    hideParentClick(e) {
      // let isOther = e.relatedTarget == null || e.relatedTarget.closest("div.el-tree")
      //     == null || e.relatedTarget.closest("div.el-tree").id != "floatTree";

      if (e.relatedTarget == null) {
        this.isShowSelect = false;
      } else {
        // e.target.focus();
      }
    },

    /** 过滤树形数组，包含children的选项均禁用 */
    filterTreeData(treeData) {
      return treeData.filter(item => {
        if (item.children && Array.isArray(item.children) && item.children.length > 0) {
          item.disabled = true;
          item.children = this.filterTreeData(item.children)
        }
        return item
      })
    },

    changeFilterText() {
      this.filterText = ''
      this.isShowSelect = false
    }
  },
  data() {
    return {
      filterText: '',
      isShowSelect: false,
      data: [],
      defaultProps: {
        children: 'children',
        label: 'pzlxglLxmc'
      }
    };
  },

}
</script>
<style scoped>
/*下拉框选择树*/
.objectTree {
  position: absolute;
  overflow: auto;
  height: 300px;
  border: 1px solid #ddd;
  border-radius: 5px;
  padding: 5px;
  line-height: normal;
  z-index: 9999;
}

.width-220 {
  width: 100%
}
</style>
